<div class="pb15" *ngIf="(model | json) === '{}'">
  <nz-empty nzNotFoundImage="simple" [nzNotFoundContent]="contentTpl">
    <ng-template #contentTpl>
      <span i18n>Click the Send button to get a test report</span>
    </ng-template>
  </nz-empty>
</div>
<div class="p15" *ngIf="model && (model | json) !== '{}'">
  <!-- Status Bar -->
  <div
    *ngIf="model?.statusCode"
    class="mb15 basic_info_bar cw f_row f_js {{ model.statusCode ? codeStatus.class : 'code_red' }}"
  >
    <div class="fs16" id="statusCode">{{ model.statusCode || 'No Response' }}</div>
    <div class="f_row_ac fs12">
      <span class="mr15" id="size">Size: {{ model.responseLength | byteToString }}</span>
      <span id="time">Time: {{ model.testDeny }}ms</span>
    </div>
  </div>
  <!-- Test Alert Tip -->
  <nz-alert
    class="eo_alert_bar"
    *ngFor="let item of model.reportList"
    [nzType]="item.type === 'interrupt' ? 'error' : 'info'"
    [nzMessage]="item.content.toString()"
    nzShowIcon
  ></nz-alert>
  <!-- Response -->
  <div *ngIf="model.responseType" [ngSwitch]="model.responseType">
    <div class="text-center" *ngSwitchCase="'stream'">
      <div *ngIf="!responseIsImg">
        <span i18n>Unable to preview non-text type data, you can</span>
        <button
          class="eo_theme_btn_default mlr5"
          type="button"
          (click)="downloadResponseText()"
          i18n="@@downloadResponse"
        >
          download response
        </button>
        <span i18n>and open it with other programs.</span>
      </div>
      <div class="mt20" *ngIf="responseIsImg" (contextmenu)="contextMenu($event, menu)">
        <img class="maw_100percent" [src]="imgBlobUrl" />
      </div>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item i18n="@@downloadResponse" (click)="downloadResponseText()">download response</li>
        </ul>
      </nz-dropdown-menu>
    </div>
    <div class="text-center" *ngSwitchCase="'longText'">
      <span i18n>The response result exceeds the previewable size, you can</span>
      <button
        i18n="@@downloadResponse"
        class="eo_theme_btn_default mlr5"
        type="button"
        (click)="downloadResponseText()"
      >
        download response
      </button>
      <!-- or
      <button class="eo_theme_btn_default" type="button" (click)="newTabResponseText()">在新标签页中显示返回结果</button>
      and open it with other programs. -->
    </div>
    <eo-monaco-editor
      *ngSwitchDefault
      class="mt20"
      [autoFormat]="true"
      [(code)]="model.body"
      [maxLine]="20"
      [config]="{ readOnly: true }"
      [eventList]="['type', 'format', 'copy', 'search']"
    ></eo-monaco-editor>
  </div>
</div>
